<template>
  <div>
    <div class="choose" @click="choose">
      <div>选择配送时间</div>
      <div>
        <span class="time">{{time}}</span>
        <svg class="right" aria-hidden="true">
          <use xlink:href="#icon-qb_gd"></use>
        </svg>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :close-on-click-overlay = "false">
      <van-datetime-picker
        title="选择配送时间"
        type="time"
        :min-hour=minHour
        :max-hour=maxHour
        :min-minute=minMinute
        :max-minute=maxMinute
        @cancel="onCancel"
        @confirm="onConfirm"
        @change="change"
      />
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
  import { Popup, DatetimePicker, Toast } from 'vant';
  import Vue from 'vue';
  Vue.use(Popup, DatetimePicker, Toast);
  export default {
    name: 'chooseTime',
    data () {
      return {
        show: false,
        currentDate: '12:00',
        mon: '',
        minMinute: 0,
        minHour: 9,
        maxHour: 18,
        maxMinute: 50
      };
    },
    props: {},
    created () {
    },
    methods: {
      choose() {
        let date = new Date();
        let Chour = date.getHours();
        if (this.isToday === 1024) {
          Toast('请先选择日期');
        } else if (this.isToday === 0) {
          if (parseInt(Chour) > 16) {
            Toast('今天无法下单');
            this.$store.commit('time', '');
          } else if (parseInt(Chour) === 16) {
            Toast('四点到五点期间下单配送时间统一为六点半');
            this.show = true;
          } else {
            //     let toh = parseInt(Chour) * 60 + parseInt(Cminute) + 150;
            //     this.minMinute = (toh) % 60;
            //     this.minHour = Math.floor((toh) / 60);
            //     if (this.minHour > 18) {
            //       this.minHour = 18;
            //       this.maxHour = 18;
            //       this.minMinute = 30;
            //       this.maxMinute = 30;
            //     } else if (this.minHour === 18) {
            //       if (this.minMinute > 30) {
            //         this.minMinute = 30;
            //         this.maxMinute = 30;
            //       } else {
            //         this.minMinute = 30;
            //       }
            //     }
            //     this.show = true;
            //   }
            // } else {
            //   this.maxHour = 18;
            //   this.minHour = 8;
            //   this.maxMinute = 50;
            //   this.minMinute = 0;
            this.show = true;
          }
        } else {
          this.show = true;
        }
      },
      onConfirm (value) {
        this.show = false;
        let arr = value.split(':');
        // if (parseInt(arr[0]) === 8) {
        //   if (parseInt(arr[1]) < 30) {
        //     Toast('八点半开始派送');
        //     this.time = '';
        //     this.$store.commit('time', '');
        //   } else {
        //     this.time = value;
        //     this.$store.commit('time', value);
        //   }
        // }
          if (parseInt(arr[0]) === 18) {
          if (parseInt(arr[1]) > 30) {
            Toast('六点半之后结束派送');
            this.time = '';
            this.$store.commit('time', '');
          } else {
            this.time = value;
            this.$store.commit('time', value);
          }
        } else {
          this.time = value;
          this.$store.commit('time', value);
        }
      },
      onCancel() {
        this.show = false;
        this.$store.commit('time', '');
      },
      change (picker) {
         //  let h = picker.getColumnValue(0);
          let values = [];
         // if (h === '08') {
         //   values = [
         //     '30',
         //     '40',
         //     '50'
         //   ];
         // } else if (h === '18') {
         //   values = ['00', '10', '20', '30'];
         // } else {
          values = ['00', '10', '20', '30', '40', '50'];
         // }
          picker.setColumnValues(1, values);
        }
    },
    computed: {
      isToday() {
        return this.$store.state.sale.today;
      },
      time: {
        get: function () {
          return this.$store.state.sale.time;
        },
        set: function (value) {
          this.$store.state.sale.time = value;
        }
      }
    },
    mounted() {
    },
    watch: {
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl"
  .choose
    background-color #fff
    margin 0 vw(15) vw(10)
    height vw(35)
    line-height vw(35)
    display flex
    font-size word14
    border-radius vw(5)
    color #333
    justify-content space-between
    align-items center
    padding 0 vw(10)
    .time
      color main-color
    .right
      width vw(6)
      height vw(10)
      fill #999
</style>
